<!--
 * @Description: 资源选择页面
 * @Author: JiangMing
 * @Date: 2021-09-8 16:23:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-8 16:23:00
-->
<template>
  <view class="page page-detail-content">
    <SearchBar ref="searchBar" class="page-header" />
    <view class="content">
      <uni-list>
        <uni-list-item
          v-for="(item,index) in list"
          :key="index"
          :title="`${item.name}（规格：${item.size} 单位：${item.unit}）`"
          clickable
          @click="checkItem(item)"
        >
          <template slot="footer">
            <template v-if="resourceId">
              <uni-icons v-if="checked == item.resourceId" type="checkmarkempty" size="16" color="#027AFF"></uni-icons>
            </template>
            <checkbox v-else :value="item.resourceId" :checked="item.checked" />
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <view class="page-footer">
      <button class="btn-primary" @click="submit">确定</button>
    </view>
  </view>
</template>

<script>
import SearchBar from '@/components/searchBar';

export default {
  components: {
    SearchBar
  },
  props: {
    query: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      list: [
        { name: '物资名称1', resourceId: '101', size: '10kg', unit: '箱' },
        { name: '物资名称2', resourceId: '102', size: '20kg', unit: '箱' },
        { name: '物资名称3', resourceId: '103', size: '10kg', unit: '箱' },
        { name: '物资名称4', resourceId: '104', size: '20kg', unit: '箱' },
        { name: '物资名称5', resourceId: '105', size: '10kg', unit: '箱' },
        { name: '物资名称6', resourceId: '106', size: '20kg', unit: '箱' },
      ],
      checked: null,
    }
  },
  onLoad(options) {
    this.type = options.type;
    this.title = options.title;
    this.resourceId = options.resourceId;
    this.checked = options.resourceId;
    uni.setNavigationBarTitle({ title: (this.title || '资源') + '选择' })
    // #ifdef APP-NVUE
    this.eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
    // #endif
    // #ifndef APP-NVUE
    this.eventChannel = this.getOpenerEventChannel();
    // #endif
  },
  methods: {
    checkItem(row) {
      console.log(row)
      if (this.resourceId) {
        this.checked = row.resourceId;
      } else {
        this.$set(row, 'checked', !row.checked);
      }
    },
    submit() {
      let res = [];
      if (this.resourceId) {
        res = this.list.filter(t => t.resourceId == this.checked);
        uni.navigateBack();
      } else {
        res = this.list.filter(t => t.checked);
        uni.navigateBack({ delta: 2 });
      }
      this.eventChannel.emit('resourceChange', res);
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    ::v-deep .uni-list-item__container {
      padding-top: 36rpx;
      padding-bottom: 36rpx;
    }
  }
  .page-footer {
    padding: 32rpx;
  }
}
</style>